<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>pencil rancor</title>

</head>
<body>

<script type="text/javascript">

//////////////////////////////////////////////////////////
//  you will have to enter these values by hand

var cubes_in_y 	   = 10;
var cubes_in_z	   = 10;

var pens_in_cube_y = 5; 
var pens_in_cube_z = 2;

var backwards_increment = false;

//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

var totalCubes 	= cubes_in_y * cubes_in_z;

//  totalPens     only used to increment the forLoop,so subtract 1
var totalPens   = totalCubes * pens_in_cube_y * pens_in_cube_z - 1;
//  pens_in_z     also not used for calculation
var pens_in_z   = cubes_in_z * pens_in_cube_z;

var X = '<table border="0" cellpadding="3"><tr>\n';

for(var I = totalPens; I >= 0; I--){

   i = (backwards_increment) ? totalPens - I : I;

   yCoord        = Math.floor(i/pens_in_z);
   zCoord        = i%pens_in_z;

   ////////////////////////////////////////////////////////////////////
   
   pensRowInCube = yCoord % pens_in_cube_y;
   pensColInCube = zCoord % pens_in_cube_z;

   cubesYcoord   = Math.floor(yCoord/pens_in_cube_y);
   cubesZcoord   = Math.floor(zCoord/pens_in_cube_z);

   yPart = (pensRowInCube * totalCubes)  +  (cubesYcoord * cubes_in_z);
   zPart = (pensColInCube * pens_in_cube_y * totalCubes) + cubesZcoord;

   rank = yPart + zPart;

   ////////////////////////////////////////////////////////////////////

   red = Math.round(255*(1-cubesYcoord/cubes_in_y));
   grn = Math.round(255*   cubesZcoord/cubes_in_z);
   blu = Math.round(100*(1-cubesZcoord/cubes_in_z));

   X += '<td style="background-color:rgb(';
   X += red +','+ grn +','+ blu +');color:#ffe;text-align:center">';
 //X += i + ' ::: ' + rank  +'</td>';
   X += rank  +'</td>';

   if(I%pens_in_z == 0) X += '\n</tr>\n<tr>\n';

}

X += '</tr></table>';


document.write(X);


</script>
</body>
</html>
